/**
 * 练习题目组件集合
 * 包含翻译、选择、听力、语法填空、阅读理解等不同类型的练习题目
 * 以及结果显示组件，集成了TTS语音功能、音效反馈和动画效果
 * 支持渐进式难度提升，从基础词汇到复杂语法和阅读理解
 */
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Dimensions, Alert } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

// 导入音频工具
import { speakText, playSoundEffect, SOUND_EFFECTS, initializeAudio } from '../utils/soundUtils';
// 导入动画组件
import { SuccessAnimation, ErrorAnimation } from './AnimatedComponents';

const { width } = Dimensions.get('window');

/**
 * 翻译练习组件 - 参考多邻国卡片式设计
 * 使用大字体显示题目，卡片式选项布局，提供清晰的视觉层次
 * 包含进度指示和交互反馈，提升用户体验
 * @param {Object} exercise - 题目数据对象
 * @param {Function} onAnswer - 答案选择回调函数
 * @param {number} selectedAnswer - 当前选中答案的索引
 */
export function TranslationExercise({ exercise, onAnswer, selectedAnswer }) {
  return (
    <View style={styles.duolingoContainer}>
      {/* 题目类型标识 - 参考多邻国设计 */}
      <View style={styles.exerciseTypeHeader}>
        <View style={styles.typeIconContainer}>
          <Ionicons name="language" size={24} color="#58CC02" />
        </View>
        <Text style={styles.exerciseTypeText}>翻译练习</Text>
      </View>
      
      {/* 题目内容区域 - 优化布局 */}
      <View style={styles.questionCard}>
        <Text style={styles.duolingoQuestionText}>{exercise.question}</Text>
      </View>
      
      {/* 选项区域 - 优化布局，更紧凑 */}
      <View style={styles.duolingoOptionsContainer}>
        {exercise.options.map((option, index) => (
          <TouchableOpacity
            key={index}
            style={[
              styles.duolingoOptionCard,
              selectedAnswer === index && styles.selectedOptionCard
            ]}
            onPress={() => {
              // 播放选择音效，提供即时反馈
              playSoundEffect(SOUND_EFFECTS.BUTTON_PRESS);
              onAnswer(index);
            }}
            activeOpacity={0.8}
          >
            <Text style={[
              styles.duolingoOptionText,
              selectedAnswer === index && styles.selectedOptionText
            ]}>
              {option}
            </Text>
            {/* 选中状态指示器 */}
            {selectedAnswer === index && (
              <View style={styles.selectedIndicator}>
                <Ionicons name="checkmark-circle" size={18} color="#58CC02" />
              </View>
            )}
          </TouchableOpacity>
        ))}
      </View>
      
      {/* 底部提示区域 - 优化样式 */}
      <View style={styles.friendlyHintContainer}>
        <Ionicons name="bulb" size={16} color="#FFA726" />
        <Text style={styles.friendlyHintText}>选择最准确的翻译</Text>
      </View>
    </View>
  );
}

/**
 * 选择题练习组件 - 参考多邻国单选设计
 * 使用圆形选择器和清晰的视觉反馈，提供直观的选择体验
 * 包含悬停效果和选中动画，增强交互性
 * @param {Object} exercise - 题目数据对象
 * @param {Function} onAnswer - 答案选择回调函数
 * @param {number} selectedAnswer - 当前选中答案的索引
 */
export function MultipleChoiceExercise({ exercise, onAnswer, selectedAnswer }) {
  return (
    <View style={styles.duolingoContainer}>
      {/* 题目类型标识 */}
      <View style={styles.exerciseTypeHeader}>
        <View style={[styles.typeIconContainer, { backgroundColor: '#E3F2FD' }]}>
          <Ionicons name="radio-button-on" size={24} color="#2196F3" />
        </View>
        <Text style={styles.exerciseTypeText}>选择题</Text>
      </View>
      
      {/* 题目内容区域 */}
      <View style={styles.questionCard}>
        <Text style={styles.duolingoQuestionText}>{exercise.question}</Text>
      </View>
      
      {/* 选项区域 - 圆形选择器设计 */}
      <View style={styles.duolingoOptionsContainer}>
        {exercise.options.map((option, index) => (
          <TouchableOpacity
            key={index}
            style={[
              styles.radioOptionCard,
              selectedAnswer === index && styles.selectedRadioCard
            ]}
            onPress={() => {
              playSoundEffect(SOUND_EFFECTS.BUTTON_PRESS);
              onAnswer(index);
            }}
            activeOpacity={0.8}
          >
            {/* 圆形选择器 */}
            <View style={[
              styles.radioCircle,
              selectedAnswer === index && styles.selectedRadioCircle
            ]}>
              {selectedAnswer === index && (
                <View style={styles.radioDot} />
              )}
            </View>
            
            {/* 选项文本 */}
            <Text style={[
              styles.radioOptionText,
              selectedAnswer === index && styles.selectedRadioText
            ]}>
              {option}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
      
      {/* 底部提示 */}
      <View style={styles.friendlyHintContainer}>
        <Ionicons name="finger-print" size={18} color="#2196F3" />
        <Text style={styles.friendlyHintText}>轻触选择一个答案</Text>
      </View>
    </View>
  );
}

/**
 * 听力练习组件 - 参考多邻国听力界面设计
 * 使用大型音频播放按钮和波形动画效果，提供沉浸式听力体验
 * 集成TTS功能和视觉反馈，帮助用户理解发音和语调
 * @param {Object} exercise - 题目数据对象，包含音频文本
 * @param {Function} onAnswer - 答案选择回调函数
 * @param {number} selectedAnswer - 当前选中答案的索引
 */
export function ListeningExercise({ exercise, onAnswer, selectedAnswer }) {
  const [isPlaying, setIsPlaying] = useState(false); // 音频播放状态
  const [hasPlayed, setHasPlayed] = useState(false);   // 是否已播放过音频
  const [playCount, setPlayCount] = useState(0);       // 播放次数统计

  // 组件初始化时设置音频系统
  useEffect(() => {
    initializeAudio();
  }, []);

  /**
   * 音频播放处理函数
   * 使用TTS朗读听力内容，支持多语言自动识别和语速调节
   */
  const playAudio = async () => {
    try {
      setIsPlaying(true);
      
      // 播放按钮交互音效
      await playSoundEffect(SOUND_EFFECTS.BUTTON_PRESS);
      
      // 获取需要朗读的文本内容
      const textToSpeak = exercise.audioText || exercise.question.replace('听音频，选择正确的翻译', '').trim();
      
      if (!textToSpeak) {
        Alert.alert('提示', '暂无音频内容可播放');
        setIsPlaying(false);
        return;
      }
      
      console.log(`听力练习播放: "${textToSpeak}"`);
      
      // 使用TTS朗读，调整语速适合学习
      const success = await speakText(textToSpeak, 'auto', {
        rate: 0.75,  // 稍慢语速，便于理解
        pitch: 1.0,  // 标准音调
        volume: 1.0  // 标准音量
      });
      
      if (success) {
        setHasPlayed(true);
        setPlayCount(prev => prev + 1);
      }
      
    } catch (error) {
      console.error('音频播放错误:', error);
      Alert.alert('播放失败', '音频播放出现问题，请检查设备音量和权限设置');
    } finally {
      // 延迟重置状态，提供视觉反馈
      setTimeout(() => {
        setIsPlaying(false);
      }, 1200);
    }
  };

  return (
    <View style={styles.duolingoContainer}>
      {/* 题目类型标识 */}
      <View style={styles.exerciseTypeHeader}>
        <View style={[styles.typeIconContainer, { backgroundColor: '#FFF3E0' }]}>
          <Ionicons name="headset" size={24} color="#FF9800" />
        </View>
        <Text style={styles.exerciseTypeText}>听力练习</Text>
      </View>
      
      {/* 题目内容 */}
      <View style={styles.questionCard}>
        <Text style={styles.duolingoQuestionText}>{exercise.question}</Text>
      </View>
      
      {/* 音频播放区域 - 参考多邻国大型播放按钮设计 */}
      <View style={styles.audioPlaybackSection}>
        <TouchableOpacity 
          style={[
            styles.duolingoAudioButton,
            isPlaying && styles.audioButtonPlaying,
            hasPlayed && styles.audioButtonPlayed
          ]} 
          onPress={playAudio}
          disabled={isPlaying}
          activeOpacity={0.8}
        >
          {/* 音频图标和动画效果 */}
          <View style={styles.audioIconContainer}>
            <Ionicons 
              name={isPlaying ? "radio" : "volume-high"} 
              size={48} 
              color={isPlaying ? "#FF9800" : "#58CC02"} 
            />
            {/* 播放状态指示器 */}
            {isPlaying && (
              <View style={styles.playingIndicator}>
                <View style={[styles.soundWave, styles.wave1]} />
                <View style={[styles.soundWave, styles.wave2]} />
                <View style={[styles.soundWave, styles.wave3]} />
              </View>
            )}
          </View>
          
          {/* 播放按钮文本和状态 */}
          <Text style={[
            styles.audioButtonLabel,
            isPlaying && styles.audioButtonLabelPlaying
          ]}>
            {isPlaying ? '正在播放音频...' : hasPlayed ? '重新播放' : '点击播放音频'}
          </Text>
          
          {/* 播放次数显示 */}
          {playCount > 0 && (
            <Text style={styles.playCountText}>
              已播放 {playCount} 次
            </Text>
          )}
        </TouchableOpacity>
      </View>
      
      {/* 选项区域 */}
      <View style={styles.duolingoOptionsContainer}>
        {exercise.options.map((option, index) => (
          <TouchableOpacity
            key={index}
            style={[
              styles.radioOptionCard,
              selectedAnswer === index && styles.selectedRadioCard
            ]}
            onPress={() => {
              playSoundEffect(SOUND_EFFECTS.BUTTON_PRESS);
              onAnswer(index);
            }}
            activeOpacity={0.8}
          >
            <View style={[
              styles.radioCircle,
              selectedAnswer === index && styles.selectedRadioCircle
            ]}>
              {selectedAnswer === index && (
                <View style={styles.radioDot} />
              )}
            </View>
            <Text style={[
              styles.radioOptionText,
              selectedAnswer === index && styles.selectedRadioText
            ]}>
              {option}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
      
      {/* 听力提示 */}
      <View style={styles.friendlyHintContainer}>
        <Ionicons name="ear" size={18} color="#FF9800" />
        <Text style={styles.friendlyHintText}>先听音频，再选择答案</Text>
      </View>
    </View>
  );
}

/**
 * 语法填空练习组件
 * 用于显示语法填空题，用户需要选择正确的词汇或语法结构
 * 帮助学习者理解语法规则和句子结构
 * @param {Object} exercise - 题目数据，包含题目、选项和正确答案
 * @param {Function} onAnswer - 答案选择回调函数
 * @param {number} selectedAnswer - 当前选中的答案索引
 */
export function GrammarFillExercise({ exercise, onAnswer, selectedAnswer }) {
  return (
    <View style={styles.exerciseContainer}>
      {/* 语法填空题目显示，常包含下划线表示需要填入的位置 */}
      <Text style={styles.questionText}>{exercise.question}</Text>
      
      {/* 语法选项容器，提供多个可能的答案 */}
      <View style={styles.optionsContainer}>
        {exercise.options.map((option, index) => (
          <TouchableOpacity
            key={index}
            style={[
              styles.grammarOptionButton,
              selectedAnswer === index && styles.selectedOption
            ]}
            onPress={() => {
              // 播放选择音效提供反馈
              playSoundEffect(SOUND_EFFECTS.BUTTON_PRESS);
              onAnswer(index);
            }}
            activeOpacity={0.7}
          >
            <Text style={[
              styles.grammarOptionText,
              selectedAnswer === index && styles.selectedOptionText
            ]}>
              {option}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
      
      {/* 语法填空提示信息 */}
      <View style={styles.hintContainer}>
        <Ionicons name="construct-outline" size={16} color="#999" />
        <Text style={styles.hintText}>选择正确的词汇或语法结构</Text>
      </View>
    </View>
  );
}

/**
 * 阅读理解练习组件
 * 用于显示阅读理解题，先提供一段文本，然后问相关问题
 * 提高学习者的阅读理解能力和文本分析技能
 * @param {Object} exercise - 题目数据，包含阅读材料和相关问题
 * @param {Function} onAnswer - 答案选择回调函数
 * @param {number} selectedAnswer - 当前选中的答案索引
 */
export function ReadingComprehensionExercise({ exercise, onAnswer, selectedAnswer }) {
  return (
    <View style={styles.exerciseContainer}>
      {/* 阅读理解题目显示，可能包含较长的文本内容 */}
      <Text style={styles.readingQuestionText}>{exercise.question}</Text>
      
      {/* 阅读理解选项容器 */}
      <View style={styles.optionsContainer}>
        {exercise.options.map((option, index) => (
          <TouchableOpacity
            key={index}
            style={[
              styles.readingOptionButton,
              selectedAnswer === index && styles.selectedOption
            ]}
            onPress={() => {
              // 播放选择音效
              playSoundEffect(SOUND_EFFECTS.BUTTON_PRESS);
              onAnswer(index);
            }}
            activeOpacity={0.7}
          >
            <Text style={[
              styles.readingOptionText,
              selectedAnswer === index && styles.selectedOptionText
            ]}>
              {option}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
      
      {/* 阅读理解提示信息 */}
      <View style={styles.hintContainer}>
        <Ionicons name="library-outline" size={16} color="#999" />
        <Text style={styles.hintText}>仔细阅读文本，理解后选择答案</Text>
      </View>
    </View>
  );
}

/**
 * 练习结果显示组件
 * 显示答题结果，包括正确/错误信息、正确答案和解释
 * 集成了声音反馈和TTS功能，提供更丰富的交互体验
 * @param {boolean} isCorrect - 答案是否正确
 * @param {string} correctAnswer - 正确答案
 * @param {string} explanation - 解释信息
 * @param {Function} onContinue - 继续按钮回调
 */
export function ExerciseResult({ isCorrect, correctAnswer, explanation, onContinue }) {
  const [hasPlayedSound, setHasPlayedSound] = useState(false); // 防止重复播放音效
  const [showAnimation, setShowAnimation] = useState(true);     // 控制动画显示

  // 组件加载时播放对应的音效和动画
  useEffect(() => {
    if (!hasPlayedSound) {
      playResultSound();
      setHasPlayedSound(true);
      // 显示动画
      setShowAnimation(true);
    }
  }, [isCorrect, hasPlayedSound]);

  /**
   * 播放结果音效
   * 根据答题结果播放不同的音效
   */
  const playResultSound = async () => {
    try {
      const soundType = isCorrect ? SOUND_EFFECTS.CORRECT : SOUND_EFFECTS.INCORRECT;
      await playSoundEffect(soundType);
      console.log(`播放${isCorrect ? '正确' : '错误'}答案音效`);
    } catch (error) {
      console.error('播放结果音效失败:', error);
    }
  };

  /**
   * 播放正确答案的TTS语音
   * 帮助用户学习正确发音
   */
  const speakCorrectAnswer = async () => {
    try {
      await playSoundEffect(SOUND_EFFECTS.BUTTON_PRESS);
      await speakText(correctAnswer, 'auto');
    } catch (error) {
      console.error('播放正确答案语音失败:', error);
    }
  };

  /**
   * 继续按钮点击处理
   * 播放按钮音效后执行继续操作
   */
  const handleContinue = async () => {
    try {
      await playSoundEffect(SOUND_EFFECTS.BUTTON_PRESS);
      onContinue();
    } catch (error) {
      console.error('继续按钮音效播放失败:', error);
      onContinue(); // 即使音效失败也要继续执行
    }
  };

  /**
   * 动画完成后的回调
   * 自动隐藏动画组件
   */
  const handleAnimationComplete = () => {
    setShowAnimation(false);
  };

  return (
    <View style={[
      styles.resultContainer,
      isCorrect ? styles.correctResult : styles.incorrectResult
    ]}>
      {/* 动画层 - 绝对定位，不影响布局 */}
      {showAnimation && (
        <>
          <SuccessAnimation 
            isVisible={isCorrect && showAnimation}
            onAnimationComplete={handleAnimationComplete}
            style={styles.animationOverlay}
          />
          <ErrorAnimation 
            isVisible={!isCorrect && showAnimation}
            onAnimationComplete={handleAnimationComplete}
            style={styles.animationOverlay}
          />
        </>
      )}
      
      {/* 主内容区域 - 重新设计，更人性化 */}
      <View style={styles.resultContent}>
        {/* 结果卡片 - 进一步优化布局 */}
        <View style={styles.resultCard}>
          <View style={styles.resultHeader}>
            {/* 结果图标和动画 */}
            <View style={[
              styles.resultIconContainer,
              isCorrect ? styles.correctIconContainer : styles.incorrectIconContainer
            ]}>
              <Ionicons 
                name={isCorrect ? "checkmark-circle" : "close-circle"} 
                size={42} 
                color={isCorrect ? "#4CAF50" : "#F44336"} 
              />
            </View>
            
            <View style={styles.resultTextContainer}>
              <Text style={[
                styles.resultTitle,
                { color: isCorrect ? "#4CAF50" : "#F44336" }
              ]}>
                {isCorrect ? "🎉 太棒了！" : "💪 再试试吧"}
              </Text>
              <Text style={styles.resultSubtitle}>
                {isCorrect ? "答案正确，你真棒！" : "不要灰心，继续努力！"}
              </Text>
              
              {/* 得分显示 - 新增功能 */}
              {isCorrect && (
                <View style={styles.scoreContainer}>
                  <Ionicons name="star" size={14} color="#FFD700" />
                  <Text style={styles.scoreText}>+10 XP</Text>
                </View>
              )}
            </View>
          </View>
        </View>
        
        {/* 错误时显示正确答案 */}
        {!isCorrect && (
          <View style={styles.correctAnswerCard}>
            <View style={styles.correctAnswerHeader}>
              <Ionicons name="bulb-outline" size={20} color="#58CC02" />
              <Text style={styles.correctAnswerLabel}>正确答案</Text>
            </View>
            
            <View style={styles.correctAnswerContent}>
              <Text style={styles.correctAnswerText}>{correctAnswer}</Text>
              
              {/* TTS语音播放按钮 */}
              <TouchableOpacity 
                style={styles.speakButton}
                onPress={speakCorrectAnswer}
                activeOpacity={0.7}
              >
                <Ionicons name="volume-high-outline" size={18} color="#58CC02" />
                <Text style={styles.speakButtonText}>听发音</Text>
              </TouchableOpacity>
            </View>
          </View>
        )}
        
        {/* 解释信息 */}
        {explanation && (
          <View style={styles.explanationCard}>
            <View style={styles.explanationHeader}>
              <Ionicons name="information-circle-outline" size={18} color="#2196F3" />
              <Text style={styles.explanationLabel}>详细解释</Text>
            </View>
            <Text style={styles.explanationText}>{explanation}</Text>
          </View>
        )}
        
        {/* 继续按钮 */}
        <TouchableOpacity 
          style={[
            styles.continueButton,
            isCorrect ? styles.correctContinueButton : styles.incorrectContinueButton
          ]} 
          onPress={handleContinue}
          activeOpacity={0.8}
        >
          <Text style={styles.continueButtonText}>
            {isCorrect ? "🚀 继续学习" : "💪 继续努力"}
          </Text>
          <Ionicons name="arrow-forward" size={18} color="#fff" style={styles.continueArrow} />
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  // === 多邻国风格主容器样式 ===
  // 主容器采用多邻国的布局设计，强调内容层次和空间感
  duolingoContainer: {
    flex: 1,
    paddingHorizontal: 20,
    paddingVertical: 16,
    justifyContent: 'flex-start',
    backgroundColor: '#f8f9fa',
  },
  
  // 练习类型头部区域 - 参考多邻国的题目类型标识
  exerciseTypeHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 20,
    paddingHorizontal: 8,
  },
  
  // 题目类型图标容器
  typeIconContainer: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: '#E8F5E8',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
  },
  
  // 题目类型文本
  exerciseTypeText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333',
    letterSpacing: 0.5,
  },
  
  // 题目卡片区域 - 参考多邻国的题目展示风格
  questionCard: {
    backgroundColor: '#ffffff',
    borderRadius: 16,
    padding: 24,
    marginBottom: 24,
    elevation: 3,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.08,
    shadowRadius: 4,
    borderWidth: 1,
    borderColor: '#f0f0f0',
  },
  
  // 多邻国风格题目文本 - 大字体，清晰易读
  duolingoQuestionText: {
    fontSize: 24,
    fontWeight: '700',
    color: '#333333',
    textAlign: 'center',
    lineHeight: 32,
    letterSpacing: 0.3,
  },
  
  // 多邻国风格选项容器 - 更紧凑的布局
  duolingoOptionsContainer: {
    marginTop: 8,
    gap: 8, // 减少间距使选项更紧凑
  },
  
  // 多邻国风格选项卡片 - 类似多邻国的按钮设计，更紧凑
  duolingoOptionCard: {
    backgroundColor: '#ffffff',
    borderWidth: 2, // 减少边框宽度
    borderColor: '#e5e5e5',
    borderRadius: 12, // 减小圆角
    paddingVertical: 12, // 进一步减少垂直内边距
    paddingHorizontal: 14, // 进一步减小水平内边距
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    elevation: 1, // 减少阴影
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.03,
    shadowRadius: 2,
    minHeight: 48, // 进一步减小最小高度
  },
  
  // 选中状态的选项卡片
  selectedOptionCard: {
    borderColor: '#58CC02',
    backgroundColor: '#f0f9f0',
    elevation: 4,
    shadowOpacity: 0.12,
  },
  
  // 多邻国风格选项文本 - 稍小一些的字体
  duolingoOptionText: {
    fontSize: 15, // 进一步减小字体
    fontWeight: '600',
    color: '#333333',
    flex: 1,
    lineHeight: 18, // 减小行高
  },
  
  // 选中状态指示器
  selectedIndicator: {
    marginLeft: 12,
  },
  
  // === 单选题样式 ===
  // 单选题选项卡片 - 更紧凑的设计
  radioOptionCard: {
    backgroundColor: '#ffffff',
    borderWidth: 2,
    borderColor: '#e5e5e5',
    borderRadius: 12, // 减小圆角
    paddingVertical: 12, // 减小垂直内边距
    paddingHorizontal: 16, // 减小水平内边距
    flexDirection: 'row',
    alignItems: 'center',
    elevation: 1, // 减小阴影
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.03,
    shadowRadius: 2,
    minHeight: 48, // 减小最小高度
  },
  
  // 选中状态的单选卡片
  selectedRadioCard: {
    borderColor: '#2196F3',
    backgroundColor: '#f3f8ff',
  },
  
  // 单选按钮圆圈
  radioCircle: {
    width: 24,
    height: 24,
    borderRadius: 12,
    borderWidth: 2,
    borderColor: '#d0d0d0',
    marginRight: 16,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  
  // 选中状态的圆圈
  selectedRadioCircle: {
    borderColor: '#2196F3',
  },
  
  // 圆圈内部的小点
  radioDot: {
    width: 12,
    height: 12,
    borderRadius: 6,
    backgroundColor: '#2196F3',
  },
  
  // 单选项文本 - 稍小一些的字体
  radioOptionText: {
    fontSize: 14, // 进一步减小字体
    fontWeight: '500',
    color: '#333',
    flex: 1,
    lineHeight: 18, // 减小行高
  },
  
  // 选中状态的单选文本
  selectedRadioText: {
    color: '#2196F3',
    fontWeight: '600',
  },
  
  // === 听力练习样式 ===
  // 音频播放区域
  audioPlaybackSection: {
    alignItems: 'center',
    marginBottom: 24,
    paddingVertical: 16,
  },
  
  // 多邻国风格音频按钮 - 大型中心按钮
  duolingoAudioButton: {
    backgroundColor: '#ffffff',
    borderWidth: 3,
    borderColor: '#58CC02',
    borderRadius: 24,
    paddingVertical: 32,
    paddingHorizontal: 40,
    alignItems: 'center',
    justifyContent: 'center',
    elevation: 4,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 3 },
    shadowOpacity: 0.12,
    shadowRadius: 5,
    minWidth: 200,
    minHeight: 160,
  },
  
  // 音频图标容器
  audioIconContainer: {
    position: 'relative',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 12,
  },
  
  // 播放状态指示器
  playingIndicator: {
    position: 'absolute',
    top: -10,
    right: -15,
    flexDirection: 'row',
    alignItems: 'flex-end',
  },
  
  // 声波动画效果
  soundWave: {
    width: 3,
    backgroundColor: '#FF9800',
    marginHorizontal: 1,
    borderRadius: 1.5,
  },
  
  wave1: {
    height: 8,
    // 动画将由CSS或动画库处理
  },
  
  wave2: {
    height: 12,
  },
  
  wave3: {
    height: 6,
  },
  
  // 音频按钮标签
  audioButtonLabel: {
    fontSize: 16,
    fontWeight: '600',
    color: '#58CC02',
    textAlign: 'center',
    marginBottom: 4,
  },
  
  // 播放中状态的按钮标签
  audioButtonLabelPlaying: {
    color: '#FF9800',
  },
  
  // 播放次数显示
  playCountText: {
    fontSize: 12,
    color: '#666',
    marginTop: 4,
  },
  
  // === 友好提示样式 ===
  // 参考博树的友好提示设计
  friendlyHintContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff7e6',
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderRadius: 12,
    marginTop: 16,
    borderWidth: 1,
    borderColor: '#ffe0b3',
  },
  
  // 友好提示文本 - 优化字体大小
  friendlyHintText: {
    marginLeft: 6,
    fontSize: 13,
    color: '#d4691a',
    fontWeight: '500',
    textAlign: 'center',
  },
  // 题目文字样式，确保可读性和美观
  questionText: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#333',
    textAlign: 'center',
    marginBottom: 24,
    lineHeight: 28,
    paddingHorizontal: 10,
  },
  // 选项容器样式，管理所有选项的布局
  optionsContainer: {
    marginTop: 12,
    paddingBottom: 24,
    marginHorizontal: 5,
  },
  // 翻译题型选项按钮样式，使用卡片式设计
  optionButton: {
    backgroundColor: '#fff',
    borderWidth: 2,
    borderColor: '#e0e0e0',
    borderRadius: 12,
    padding: 16,
    marginBottom: 10,
    alignItems: 'center',
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    minHeight: 56,
  },
  
  // 选中状态的选项样式
  selectedOption: {
    borderColor: '#58CC02',
    backgroundColor: '#f0f9f0',
  },
  
  // 选项文本样式，确保清晰可读
  optionText: {
    fontSize: 16,
    color: '#333',
    fontWeight: '500',
    textAlign: 'center',
    lineHeight: 22,
  },
  
  // 选中状态的文本样式
  selectedOptionText: {
    color: '#58CC02',
    fontWeight: '600',
  },
  // 多选题选项按钮样式，使用水平布局
  mcOptionButton: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderWidth: 2,
    borderColor: '#e0e0e0',
    borderRadius: 15,
    padding: 16, // 统一内边距
    marginBottom: 12, // 统一间距
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.2,
    shadowRadius: 2,
    minHeight: 60, // 保证最小高度一致性
  },
  // 多选题圆圈选择器样式
  mcOptionCircle: {
    width: 24,
    height: 24,
    borderRadius: 12,
    borderWidth: 2,
    borderColor: '#ccc',
    marginRight: 15,
    justifyContent: 'center',
    alignItems: 'center',
    flexShrink: 0, // 防止圈圈被压缩
  },
  // 选中状态的圈圈样式
  selectedCircle: {
    backgroundColor: '#58CC02',
    borderColor: '#58CC02',
  },
  // 多选题选项文字样式
  mcOptionText: {
    fontSize: 16,
    color: '#333',
    flex: 1,
    lineHeight: 22, // 设置行高，优化排版
  },
  // 音频播放按钮样式，听力练习专用
  audioButton: {
    backgroundColor: '#f8f8f8',
    borderWidth: 2,
    borderColor: '#58CC02',
    borderRadius: 20,
    padding: 25, // 稍微减小内边距
    alignItems: 'center',
    marginBottom: 25, // 减小下边距
    borderStyle: 'dashed',
    minHeight: 120, // 设置最小高度
  },
  // 音频按钮文字样式
  audioButtonText: {
    marginTop: 10,
    fontSize: 16,
    color: '#58CC02',
    fontWeight: '500',
    textAlign: 'center', // 文字居中
  },
  // 播放中状态的按钮样式
  audioButtonPlaying: {
    backgroundColor: '#FFF0F0',
    borderColor: '#FF6B6B',
  },
  // 播放中状态的文字样式
  audioButtonTextPlaying: {
    color: '#FF6B6B',
  },
  // 已播放状态的按钮样式
  audioButtonPlayed: {
    backgroundColor: '#E8F5E8',
  },
  // TTS语音播放按钮样式
  speakButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#E8F5E8',
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 20,
    marginTop: 10,
  },
  // TTS按钮文字样式
  speakButtonText: {
    marginLeft: 8,
    fontSize: 14,
    color: '#58CC02',
    fontWeight: '500',
  },
  // 结果显示主容器样式 - 优化布局
  resultContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    position: 'relative',
  },
  // 正确答案的结果背景
  correctResult: {
    backgroundColor: '#F1F8E9',
  },
  // 错误答案的结果背景
  incorrectResult: {
    backgroundColor: '#FFF3E0',
  },
  
  // 结果卡片 - 新增，更好的视觉层次
  resultCard: {
    backgroundColor: '#fff',
    borderRadius: 16,
    padding: 20,
    marginBottom: 16,
    width: '100%',
    elevation: 3,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  
  // 结果头部区域样式 - 重新设计
  resultHeader: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  
  // 结果图标容器 - 优化尺寸
  resultIconContainer: {
    width: 56,
    height: 56,
    borderRadius: 28,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 14,
  },
  correctIconContainer: {
    backgroundColor: '#E8F5E8',
  },
  incorrectIconContainer: {
    backgroundColor: '#FFEBEE',
  },
  
  // 结果文字容器
  resultTextContainer: {
    flex: 1,
  },
  // 结果标题样式 - 优化字体大小和间距
  resultTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 2,
  },
  // 结果副标题样式
  resultSubtitle: {
    fontSize: 13,
    color: '#666',
    lineHeight: 18,
  },
  
  // 得分显示容器 - 新增
  scoreContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 4,
    backgroundColor: '#FFF8DC',
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 10,
    alignSelf: 'flex-start',
  },
  scoreText: {
    fontSize: 12,
    color: '#B8860B',
    fontWeight: '600',
    marginLeft: 3,
  },
  
  // 正确答案卡片 - 进一步优化
  correctAnswerCard: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 14,
    marginBottom: 14,
    width: '100%',
    borderLeftWidth: 3,
    borderLeftColor: '#58CC02',
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.08,
    shadowRadius: 2,
  },
  
  // 正确答案头部
  correctAnswerHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 6,
  },
  
  // 正确答案内容
  correctAnswerContent: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  // 正确答案标签样式
  correctAnswerLabel: {
    fontSize: 14,
    color: '#58CC02',
    fontWeight: '600',
    marginLeft: 6,
  },
  // 正确答案文字样式
  correctAnswerText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333',
    flex: 1,
  },
  
  // 解释卡片 - 进一步优化
  explanationCard: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 14,
    marginBottom: 18,
    width: '100%',
    borderLeftWidth: 3,
    borderLeftColor: '#2196F3',
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.08,
    shadowRadius: 2,
  },
  
  // 解释头部
  explanationHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 6,
  },
  explanationLabel: {
    fontSize: 14,
    color: '#2196F3',
    fontWeight: '600',
    marginLeft: 6,
  },
  explanationText: {
    fontSize: 13,
    color: '#333',
    lineHeight: 18,
  },
  
  // 继续按钮样式 - 优化尺寸
  continueButton: {
    backgroundColor: '#58CC02',
    paddingHorizontal: 28,
    paddingVertical: 12,
    borderRadius: 22,
    elevation: 3,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    minWidth: 140,
  },
  // 正确答案时的继续按钮样式
  correctContinueButton: {
    backgroundColor: '#4CAF50',
  },
  // 错误答案时的继续按钮样式
  incorrectContinueButton: {
    backgroundColor: '#FF7043',
  },
  // 继续按钮文字样式
  continueButtonText: {
    color: '#fff',
    fontSize: 15,
    fontWeight: '600',
    marginRight: 4,
  },
  // 继续按钮箭头样式
  continueArrow: {
    marginLeft: 2,
  },
  
  // 语音按钮样式 - 进一步优化
  speakButton: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#E8F5E8',
    paddingHorizontal: 10,
    paddingVertical: 6,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: '#58CC02',
  },
  speakButtonText: {
    color: '#58CC02',
    fontSize: 11,
    fontWeight: '600',
    marginLeft: 3,
  },
  continueButtonText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
  },
  // 继续按钮中的箭头图标样式
  continueArrow: {
    marginLeft: 8,
  },
  // 提示信息容器样式
  hintContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 15, // 减小上边距
    padding: 10,
    backgroundColor: '#f8f8f8',
    borderRadius: 10,
    marginHorizontal: 10, // 增加水平边距
  },
  // 提示文字样式
  hintText: {
    marginLeft: 8,
    fontSize: 14,
    color: '#666',
    textAlign: 'center', // 文字居中
  },
  
  // === 语法填空练习样式 ===
  // 语法填空选项按钮样式，使用特殊的艶丽色彩标识
  grammarOptionButton: {
    backgroundColor: '#FFF9E6', // 淡黄色背景，表示语法类题目
    borderWidth: 2,
    borderColor: '#FFD700',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    alignItems: 'center',
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.2,
    shadowRadius: 2,
    minHeight: 55,
  },
  // 语法填空选项文字样式
  grammarOptionText: {
    fontSize: 16,
    color: '#B8860B', // 深黄色文字
    fontWeight: '600',
    textAlign: 'center',
    lineHeight: 22,
  },
  
  // === 阅读理解练习样式 ===
  // 阅读理解题目文字样式，支持较长文本
  readingQuestionText: {
    fontSize: 18, // 稍小一些，适合阅读
    fontWeight: '500',
    color: '#333',
    textAlign: 'left', // 左对齐，方便阅读
    marginBottom: 25,
    lineHeight: 26,
    paddingHorizontal: 10,
    backgroundColor: '#F8F9FA', // 淡灰色背景突出阅读内容
    borderRadius: 10,
    padding: 15,
    borderLeftWidth: 4,
    borderLeftColor: '#2196F3', // 蓝色左边框标识阅读区域
  },
  // 阅读理解选项按钮样式
  readingOptionButton: {
    backgroundColor: '#E3F2FD', // 淡蓝色背景，表示阅读类题目
    borderWidth: 2,
    borderColor: '#2196F3',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    alignItems: 'center',
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.2,
    shadowRadius: 2,
    minHeight: 55,
  },
  // 阅读理解选项文字样式
  readingOptionText: {
    fontSize: 16,
    color: '#1976D2', // 深蓝色文字
    fontWeight: '500',
    textAlign: 'center',
    lineHeight: 22,
  },
  
  // === 动画和布局优化样式 ===
  // 动画覆盖层样式，使用绝对定位避免影响布局
  animationOverlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 1000,
    pointerEvents: 'none', // 不阻止用户交互
  },
  // 结果内容区域样式，固定布局
  resultContent: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 1, // 确保在动画层下方
  },
});